<template>
  <div id="video">
    <div class="mainmv">
      <h2 class="title">mv详情</h2>
      <!-- mv -->
      <div class="video-wrap">
        <video :src="url" controls></video>
      </div>
      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="avatar-wrap">
          <!-- 头像 -->
          <img :src="icon" alt="">
          <span class="name">{{mvInfo.artistName}}</span>
        </div>
        <div class="mv-info">
          <h4>{{mvInfo.name}}</h4>
          <span class="date">发布: {{mvInfo.publishTime}}</span>
          <span class="number">播放量: {{mvInfo.playCount}}</span>
          <div class="desc">
            <p>
              {{mvInfo.desc}}
            </p>
          </div>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap">
        <h4 id="comment">精彩评论<span class="number">({{total.total}})</span></h4>

        <ul class="content-wrap">
          <li class="re-content" v-for="(item,index) in hotComment" :key="index">
            <img :src="item.user.avatarUrl" alt="" />
            <!-- 头像 -->
            <span class="name">{{item.user.nickname}}:</span>
            <!-- 昵称 -->
            <p class="date">{{item.date}}</p>
            <!-- 评论日期 -->
            <p class="comm">{{item.content}}</p>
            <!-- 评论内容 -->
          </li>
        </ul>
      </div>
    </div>
    <!-- 右边的 -->
    <div class="other">
      <h3>相关推荐</h3>
      <ul>
        <li v-for="(item,index) in simiMvs" :key="index" @dblclick="tosimmv(item.id)">
          <img :src="item.cover" alt="">
          <p class="other-name">{{item.name}}</p>
          <span class="other-author">{{item.artistName}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'mv',
    created() {
      axios({
        url: 'http://music.eleuu.com/mv/url',
        method: 'get',
        params: {
          id: this.$route.query.q
        }
      }).then(res => {
        this.url = res.data.data.url
      });
      axios({
        url: 'http://music.eleuu.com/simi/mv',
        method: 'get',
        params: {
          mvid: this.$route.query.q
        }
      }).then(res => {
        this.simiMvs = res.data.mvs
      })
      axios({
        url: 'http://music.eleuu.com/mv/detail',
        method: 'get',
        params: {
          mvid: this.$route.query.q
        }
      }).then(res => {
        this.mvInfo = res.data.data
        axios({
          url: 'http://music.eleuu.com/artists',
          method: 'get',
          params: {
            id: this.mvInfo.artists[0].id
          }
        }).then(res => {
          this.icon = res.data.artist.picUrl
        })
      })
      axios({
        url: 'http://music.eleuu.com/comment/mv',
        method: 'get',
        params: {
          id: this.$route.query.q,
          limit: 10,
          offset: 0
        }
      }).then(res => {
        console.log(res);
        this.hotComment = res.data.hotComments
        this.total = res.data
      });
    },

    data() {
      return {
        url: "",
        simiMvs: [],
        mvInfo: {},
        icon: '',
        hotComment: [],
        total: []
      }
    },
    methods: {
      handleCurrentChange(val) {
        console.log(`当前页: ${val} `);
      },
      tosimmv(id) {
        this.$router.push(`/Video1?q=${id}`)
      }
    },
  }

</script>
<style scoped>
  #video {
    position: absolute;
    left: 5%;
    top: -5%;
    height: 95%;
    width: 1060px;
    border: 0px solid white;
    color: rgb(255, 255, 255, 0.7);
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(255, 255, 255, 0.7);
  }

  .mainmv {
    position: absolute;
    left: 0;
    top: 0;
    width: 840px;
    height: 525px;
    overflow: hidden;
    overflow-y: scroll;
  }

  .mainmv::-webkit-scrollbar {
    width: 0px;
  }

  h2 {
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .video-wrap {
    position: relative;
    left: 20px;
    top: 30px;
    width: 800px;
    height: 400px;
  }

  video {
    position: absolute;
    left: 0;
    top: 0;
    margin: 20px 0px;
    width: 800px;
    height: 450px;
  }

  h3 {
    position: absolute;
    left: 888px;
    top: 0px;
  }

  ul {
    position: absolute;
    left: 890px;
    top: 50px;
    list-style: none;
    width: 265px;
    height: 470px;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0;
  }

  li {
    height: 120px;
    position: relative;
  }

  li img {
    width: 100px;
    height: 85px;
    float: left;
    object-fit: cover;
  }

  .other li p {
    position: absolute;
    left: 120px;
    top: 5px;
    text-align: left;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0px;
  }

  .other-author {
    position: absolute;
    top: 55px;
    left: 120px;
  }

  /* mv信息 */
  .info-wrap {
    position: relative;
    width: 670px;
    height: 300px;
    top: 100px;
  }

  .avatar-wrap {
    position: relative;
    height: 50px;
  }

  .avatar-wrap img {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .avatar-wrap .name {
    position: absolute;
    top: 15px;
    left: 75px;
    font-size: 20px;
  }

  .mv-info {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 690px;
  }

  .mv-info h4 {
    position: absolute;
    left: 20px;
    top: 12px;
    font-size: 24px;
    margin: 0;
  }

  .mv-info .date {
    position: absolute;
    left: 20px;
    top: 60px;
  }

  .mv-info .number {
    position: absolute;
    left: 155px;
    top: 60px;
  }

  .mv-info .desc p {
    position: absolute;
    top: 100px;
    left: 20px;
    width: 800px;
    height: 100px;
    margin: 0 0 0 0;
    text-align: left;
  }


  /* 评论 */
  .content-wrap::-webkit-scrollbar {
    width: 0;
  }

  .comment-wrap {
    position: relative;
    left: 20px;
    top: 0px;
    height: 1000px;
    width: 840px;
  }

  #comment {
    position: absolute;
    left: 0px;
    top: 50px;
  }

  .content-wrap {
    position: absolute;
    left: 0px;
    top: 80px;
    width: 800px;
    height: 920px;
    padding: 0px 0px;
    overflow-y: hidden;
  }

  .re-content {
    height: 85px;
    position: relative;
    margin: 15px 0px;
    width: 800px;
  }

  .re-content .name {
    position: absolute;
    left: 60px;
    top: 5px;
  }

  .re-content .date {
    position: absolute;
    left: 490px;
    top: 5px;
  }

  .re-content .comm {
    position: absolute;
    left: 50px;
    top: 30px;
    width: 730px;
    margin: 10px;
    text-align: left;
    overflow-y: hidden;
    overflow-x: visible;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .content-wrap img {
    width: 45px;
    height: 45px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 50%;
  }

</style>
